import {useState} from "react"

export function MyComponent(){
    const [count,setCount] = useState(0)
    return (
        <div>
            父组件：-----{count}
            <hr></hr>
            {/* <Son></Son> */}

            {/* 父传子 */}
            <Son name="我是子组件"  count={count} updata={setCount} arr={[1,2,3,3]} obj={{name:"老大",age:22}}></Son>

            {/* <button onClick={()=>setCount(count+1)}>{count}</button> */}

            <h2>1111</h2>

            

        

        </div>
    )
}

function Son(props){
    return (
        <div>
            子组件：{props.name}----
            {props.count}
            {/* 子传父 */}
            <button onClick={()=>props.updata(props.count+1)}>{props.count}</button>
            {props.children}

            {
                props.arr.map(v=><div key={v}>{v}</div>)
            }

            {props.obj.name}
        </div>
    )
}